[CloudFront] Lambda@EdgeでHTTPセキュリティヘッダーを追加する方法

[CloudFront] Lambda@EdgeでHTTPセキュリティヘッダーを追加する方法

Clock Icon2020.04.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Lambda@EdgeはAmazon CloudFrontの機能で、CloudFrontのイベントに応じてLambda関数を実行できます。この機能を利用して、CloudFrontで配信しているコンテンツのレスポンスヘッダーにHTTPセキュリティヘッダーを設定します。

Lambda@Edge | AWS

HTTPセキュリティヘッダーは、Webブラウザのセキュリティ対策のためにWebアプリで使用されるHTTPヘッダーです。HTTPセキュリティヘッダーを設定することで、クリックジャッキングやクロスサイトスクリプティング(XSS)など、クライアント側の脆弱性を利用した攻撃を困難にします。

OWASP Secure Headers Project

Lambda@Edgeの仕組み

Lambda@Edgeはオリジのレスポンスをトリガーにした場合、CloudFrontがオリジンから取得したコンテンツをキャッシュする前に、コンテンツ内容をカスタマイズすることができます。

Lambda@Edge

Lambda@Edgeの設定方法

Lambda@EdgeでHTTPセキュリティヘッダーを設定する手順を説明します。

Lambda関数を作成

Lambda@Edgeを設定するためには、us-east-1(バージニア北部)リージョンを選択する必要があります。リージョンが正しいことを確認して、任意の関数名でLambda関数を作成します。

実行ロールにはポリシーテンプレートから「基本的なlambda@Edgeのアクセス権限」を選択してください。

Lambda@Edgeのアクセス権限

次のソースコードはNode.jsでの実装サンプルになります。

"use strict";

exports.handler = (event, context, callback) => {
  const response = event.Records[0].cf.response;
  const headers = response.headers;

  headers["strict-transport-security"] = [
    {
      key: "Strict-Transport-Security",
      value: "max-age=63072000; includeSubdomains; preload"
    }
  ];
  headers["content-security-policy"] = [
    {
      key: "Content-Security-Policy",
      value:
        "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'"
    }
  ];
  headers["x-content-type-options"] = [
    {
      key: "X-Content-Type-Options",
      value: "nosniff"
    }
  ];
  headers["x-frame-options"] = [
    {
      key: "X-Frame-Options",
      value: "DENY"
    }
  ];
  headers["x-xss-protection"] = [
    {
      key: "X-XSS-Protection",
      value: "1; mode=block"
    }
  ];
  headers["referrer-policy"] = [
    {
      key: "Referrer-Policy",
      value: "same-origin"
    }
  ];

  callback(null, response);
};

Lambda@Edgeへのデプロイ

Lambda関数のトリガーにCloudFrontを設定します。

LambdaのトリガーにCloudFrontを設定

Lambda@Edgeへのデプロイをクリックします。

Lambda@Edgeへデプロイのボタン

CloudFrontのディストリビューションを選択します。HTTPレスポンスヘッダーをカスタマイズする場合、CloudFrontイベントはオリジンレスポンスを選択します。

Lambda@Edgeへのデプロイ

動作確認

CloudFrontのディストリビューションのステータスがDeployedになるまで待ちます。

CloudFrontのディストリビューションのステータス

Webサイトを表示して、ブラウザのデバッグツールで、レスポンスヘッダーが追加されていることを確認できればOKです。

デバッグツールでレスポンスヘッダーを確認

Mozilla ObservatoryでWebサイトの評価を確認することもできます。評価は必ずしもコンテンツの安全性を示すものではありませんが、脆弱性を改善するための目安になると思います。

Mozilla Observatory

まとめ

Lambda@Edgeを使用することで、オリジンを変更せず簡単にHTTPセキュリティヘッダーを追加することができました。アクセス数の多いサイトに導入する際には、Lambda@Edgeのクォータについても確認してみてください。

参考資料

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.